<template>
    <div id="AnalysisReport">
        <ReturnPage />
        <div class="AnalysisReport_box">
            <h3 class="h3">巡检报告</h3>

            <el-collapse v-model="activeNames"
                         @change="handleChange"
                         class="mt15">
                <!-- 概述信息 -->
                <el-collapse-item title="概述信息"
                                  name="1">
                    <div class="info_box">
                        <el-descriptions class="margin-top"
                                         :column="2"
                                         size="mini"
                                         border>
                            <el-descriptions-item>
                                <template slot="label"
                                          style="text-align:center"> 主机信息 </template>
                                主机名称：{{ hostsData.host }}<br />
                                主机ip：{{ hostsData.ip }}<br />
                                状态：{{ hostsData.status | status }}<br />
                                巡检时间：{{ hostsData.checkTime }}<br />
                                磁盘总量:{{ hostsData.diskTotal }}<br />
                                磁盘最大容量:{{ hostsData.diskMax }}<br />
                                内存总量:{{ hostsData.memoryTotal }}<br />

                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 时间统计 </template>
                                当前时间：{{ times }}<br />
                                内存最大:{{ hostsData.memoryMax }}<br />
                                内容平均使用:{{ hostsData.memoryAvg }}<br />
                                cpu负载最大:{{ hostsData.cpuMax }}<br />
                                cpu负载平均值:{{ hostsData.cpuAvg }}<br />
                                cpu核数:{{ hostsData.cpuValue }}<br />
                            </el-descriptions-item>
                            <!-- <el-descriptions-item>
                                <template slot="label"> 扫描统计 </template>
                                主机个数：1台<br />
                                服务个数：0个
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 分析结果 </template>
                                总指标数：23<br />
                                异常指标：1
                            </el-descriptions-item> -->
                        </el-descriptions>
                    </div>
                </el-collapse-item>
                <!-- 风险指标 -->
                <!-- <el-collapse-item title="风险指标"
                                  name="2">
                    <div class="info_box">
                        <el-table :data="tableData"
                                  style="width: 100%"
                                  size="mini">
                            <el-table-column label="主机指标">
                                <el-table-column type="index"
                                                 label="序列"></el-table-column>
                                <el-table-column prop="name"
                                                 label="告警标题"
                                                 width="100px"
                                                 show-overflow-tooltip></el-table-column>
                                <el-table-column prop="status"
                                                 label="状态"
                                                 width="100px"
                                                 show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column prop="severity"
                                                 label="问题级别"
                                                 width="80px"
                                                 show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column prop="port"
                                                 label="端口"
                                                 show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column prop="ip"
                                                 show-overflow-tooltip
                                                 label="ip">-
                                </el-table-column>
                                <el-table-column prop="type"
                                                 show-overflow-tooltip
                                                 label="操作类型">-
                                </el-table-column>
                                <el-table-column prop="host"
                                                 show-overflow-tooltip
                                                 label="主机名称">-
                                </el-table-column>
                                <el-table-column prop="beginTime"
                                                 show-overflow-tooltip
                                                 label="告警发生时间">-
                                </el-table-column>
                                <el-table-column prop="warnTime"
                                                 show-overflow-tooltip
                                                 label="告警时长">-
                                </el-table-column>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-collapse-item> -->
                <!-- <el-collapse-item title="风险指标" name="2">
                    <div class="info_box">
                        <el-table :data="tableData" style="width: 100%" size="mini">
                            <el-table-column label="主机指标">
                                <el-table-column type="index" label="序列"></el-table-column>
                                <el-table-column prop="ip" label="IP地址" width="100px"
                                    show-overflow-tooltip></el-table-column>
                                <el-table-column prop="system" label="操作系统" width="100px" show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column prop="level" label="风险级别" width="80px" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        <el-tag
                                            :type="scope.row.level == 1 ? 'danger' : scope.row.level == 2 ? 'warning' : 'info'">{{
                                                scope.row.level
                                                == 1 ? "严重" : scope.row.level == 2 ? "一般验证" : "警告" }}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="risk" label="风险描述" show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column prop="solution" show-overflow-tooltip label="解决方案">-
                                </el-table-column>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-collapse-item> -->
                <!-- 主机列表 -->
                <!-- <el-collapse-item title="主机列表" name="3">
                    <div class="info_box">
                        <el-table :data="hostData" style="width: 100%" size="mini">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <div class="expand_box_first">
                                        <el-form label-position="left" inline class="demo-table-expand">
                                            <el-form-item label="主机IP">
                                                <span>{{ props.row.IP }}</span>
                                            </el-form-item>
                                            <el-form-item label="主机名">
                                                <span>{{ props.row.hostname }}</span>
                                            </el-form-item>
                                            <el-form-item label="内核版本">
                                                <span>{{ props.row.nhbb }}</span>
                                            </el-form-item>
                                            <el-form-item label="SElinux状态">
                                                <span>{{ props.row.selinux }}</span>
                                            </el-form-item>
                                            <el-form-item label="最大打开文件数">
                                                <span>{{ props.row.maxFile }}</span>
                                            </el-form-item>
                                            <el-form-item label="IOWait">
                                                <span>{{ props.row.IOWait }}</span>
                                            </el-form-item>
                                            <el-form-item label="inode使用率">
                                                <span>{{ props.row.inode }}</span>
                                            </el-form-item>
                                            <el-form-item label="当前时间">
                                                <span>{{ props.row.currentTime }}</span>
                                            </el-form-item>
                                            <el-form-item label="进程数">
                                                <span>{{ props.row.number }}</span>
                                            </el-form-item>
                                            <el-form-item label="umasck">
                                                <span>{{ props.row.umack }}</span>
                                            </el-form-item>
                                            <el-form-item label="带宽">
                                                <span>{{ props.row.dk }}</span>
                                            </el-form-item>
                                            <el-form-item label="IO">
                                                <span>{{ props.row.io }}</span>
                                            </el-form-item>
                                            <el-form-item label="僵尸进程">
                                                <span>{{ props.row.zoombie }}</span>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                    <div class="expand_box_second">
                                        <el-collapse v-model="activeNames2" @change="handleChange">
                                            <el-collapse-item title="cpu使用率Top10进程" name="1-1">
                                                <div class="info_box">
                                                    <el-table :data="cpuData" style="width: 100%" size="mini">
                                                        <el-table-column type="index" label="TOP"></el-table-column>
                                                        <el-table-column prop="PID" label="PID" width="100px"
                                                            show-overflow-tooltip></el-table-column>
                                                        <el-table-column prop="rate" label="使用率" width="100px"
                                                            show-overflow-tooltip></el-table-column>
                                                        <el-table-column prop="process" label="进程"
                                                            show-overflow-tooltip></el-table-column>
                                                    </el-table>
                                                </div>
                                            </el-collapse-item>
                                            <el-collapse-item title="内存使用率Top10进程" name="2-2">
                                                <div class="info_box">
                                                    <el-table :data="cpuData" style="width: 100%" size="mini">
                                                        <el-table-column type="index" label="TOP"></el-table-column>
                                                        <el-table-column prop="PID" label="PID" width="100px"
                                                            show-overflow-tooltip></el-table-column>
                                                        <el-table-column prop="rate" label="使用率" width="100px"
                                                            show-overflow-tooltip></el-table-column>
                                                        <el-table-column prop="process" label="进程"
                                                            show-overflow-tooltip></el-table-column>
                                                    </el-table>
                                                </div>
                                            </el-collapse-item>
                                            <el-collapse-item title="内核参数" name="3-3">
                                                <div class="info_box grid_box">
                                                    <span v-for="(item, index) in nhData" :key="index">{{
                                                        item
                                                    }}</span>
                                                </div>
                                            </el-collapse-item>
                                        </el-collapse>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column type="index" label="序列"></el-table-column>
                            <el-table-column prop="IP" label="IP地址" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="system" label="操作系统" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="info" label="配置信息" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="CPU" label="CPU使用率" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="NEICUN" show-overflow-tooltip label="内存使用率"></el-table-column>
                            <el-table-column prop="GENFENQU" show-overflow-tooltip label="根分区使用率"></el-table-column>
                            <el-table-column prop="DATA" show-overflow-tooltip label="数据分区使用率"></el-table-column>
                            <el-table-column prop="TIME" show-overflow-tooltip label="运行时间"></el-table-column>
                            <el-table-column prop="pjfz" show-overflow-tooltip label="平均负载"></el-table-column>
                        </el-table>
                    </div>
                </el-collapse-item> -->
            </el-collapse>
        </div>
    </div>
</template>

<script>
    import {
        getRemoteHostListApi,
        getHostIndicatorApi
    } from "@/api/automated/instrumentPanel"
    export default {
        data () {
            return {
                times: '',//格式化之后的当前时间,
                //展开的项
                activeNames: ["1", "2", "3"],
                activeNames2: [],
                //主机指标数据
                tableData: [

                ],
                //主机列表

                hostsData: {

                },
                //cpu使用率top10
                cpuData: [

                ],
                //内核参数
                nhData: [
                ],
            };
        },
        methods: {
            //巡检报告概述信息
            getList () {
                getRemoteHostListApi(this.$route.query.id).then(res => {
                    if (res.code == 200) {
                        console.log(res.data)
                        this.hostsData = res.data
                    }
                })
            },
            //主机指标
            getHostIndicator () {
                getHostIndicatorApi({ hostids: this.$route.query.hostids }).then(res => {
                    if (res.code == 200) {
                        this.tableData = res.data
                    }
                })
            },
            getTimes () {
                setInterval(this.getTimesInterval, 1000);
            },
            getTimesInterval: function () {
                let _this = this;
                let year = new Date().getFullYear(); //获取当前时间的年份
                let month = new Date().getMonth() + 1; //获取当前时间的月份
                let day = new Date().getDate(); //获取当前时间的天数
                let hours = new Date().getHours(); //获取当前时间的小时
                let minutes = new Date().getMinutes(); //获取当前时间的分数
                let seconds = new Date().getSeconds(); //获取当前时间的秒数
                //当小于 10 的是时候，在前面加 0
                if (hours < 10) {
                    hours = "0" + hours;
                }
                if (minutes < 10) {
                    minutes = "0" + minutes;
                }
                if (seconds < 10) {
                    seconds = "0" + seconds;
                }
                //拼接格式化当前时间
                _this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
            }
        },
        created () {
            this.getTimes()
            this.getList()
            this.getHostIndicator()
            console.log(this.$route.query.id)
        },
        beforeDestroy () {
            if (this.times) {
                clearInterval(this.getTimesInterval);
            }
        },
        filters: {
            //过滤严重性
            status (val) {
                switch (val) {
                    case 0:
                        return "失败";
                    case 1:
                        return "成功";
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    #AnalysisReport {
        .AnalysisReport_box {
            margin-top: 10px;
            background-color: #ffffff;
            box-sizing: border-box;
            padding: 15px;
            border-radius: 5px;

            .h3 {
                text-align: center;
                font-size: 22px;
                position: relative;

                span {
                    position: absolute;
                    right: 0px;
                    top: 10px;
                    font-size: 14px;
                    color: #409eff;
                    cursor: pointer;
                }
            }
        }
    }

    ::v-deep .el-collapse {
        border: none;

        .el-collapse-item .el-collapse-item__header {
            border: none;
            background-color: #edf0f3;
            border-radius: 5px;
            padding-left: 20px;
        }

        .el-collapse-item .el-collapse-item__wrap {
            border: none;

            .el-collapse-item__content {
                background-color: #ffffff;

                .info_box {
                    box-sizing: border-box;
                    padding: 15px;
                }
            }
        }
    }

    //主机列表展开
    .expand_box_first,
    .expand_box_second {
        border: 1px solid #e7e5e5;
        box-sizing: border-box;
        padding: 10px;
        margin: 0 10px;
    }

    ::v-deep .expand_box_second {
        margin-top: 10px;

        .el-collapse {
            border-left: 1px solid #dbdbdb;
            border-right: 1px solid #dbdbdb;

            .el-collapse-item .el-collapse-item__header {
                border-bottom: 1px solid #dbdbdb;
                border-top: 1px solid #dbdbdb;
                background-color: transparent;
                border-radius: 0px;
                padding-left: 20px;
            }

            .el-collapse-item .el-collapse-item__wrap {
                border: none;

                .el-collapse-item__content {
                    background-color: #ffffff;

                    .info_box {
                        box-sizing: border-box;
                        padding: 15px;
                    }

                    .grid_box {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        row-gap: 15px;

                        span {
                            text-align: left;
                        }
                    }
                }
            }
        }
    }

    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 33.3%;
    }
</style>